<template>
  <div class="order">
    <Navbar :title="'申请记录'"></Navbar>
    <div class="tab">
      <van-tabs v-model:active="active">
        <van-tab title="全部记录" class="content">
          <div v-for="item in list" :key="item._id" class="item">
            <div class="header">
              <h3>住院病案</h3>
              <button
                :class="
                  item.status === 1
                    ? 'status1'
                    : item.status === 2
                    ? 'status2'
                    : item.status === 3
                    ? 'status3'
                    : item.status === 4
                    ? 'status4'
                    : item.status === 5
                    ? 'status5'
                    : 'status6'
                "
              >
                {{
                  item.status === 1
                    ? "待审核"
                    : item.status === 2
                    ? "已审核"
                    : item.status === 3
                    ? "待寄出"
                    : item.status === 4
                    ? "已寄出"
                    : item.status === 5
                    ? "已签收"
                    : item.status === 6
                    ? "已驳回"
                    : item.status === 0
                    ? "已取消"
                    : ""
                }}
              </button>
            </div>
            <div class="header1">
              <span>申请医院：</span>
              <span>四川省保健院北苑</span>
            </div>
            <div class="header1">
              <span>申请人：</span>
              <span>{{ item.username }}</span>
            </div>
            <div class="header1">
              <span>申请时间</span>
              <span>{{ moment(item.time).format("YYYY-MM-DD HH:mm:ss") }}</span>
            </div>
            <div class="header1">
              <span>订单金额</span>
              <span>￥100</span>
            </div>
            <div v-if="item.status === 6">
              <div class="reason">
                <p>驳回原因：</p>
                <span>{{ item.reason }}</span>
              </div>
            </div>
            <div
              class="footer"
              v-if="item.status === 1 || item.status === 5 || item.status === 6||item.status === 4"
            >
              <button @click="clickDetail(item)">
                {{
                  item.status === 1
                    ? "取消申请"
                    : item.status === 5
                    ? "查看详情"
                    : item.status === 4
                    ? "查看详情"
                    : item.status === 6
                    ? "重新申请"
                    : ""
                }}
              </button>
            </div>
          </div>
        </van-tab>
        <van-tab title="待审核" class="content">
          <div
            v-for="item in list.filter((item) => item.status === 1)"
            :key="item._id"
            class="item"
          >
            <div class="header">
              <h3>住院病案</h3>
              <button
                :class="
                  item.status === 1
                    ? 'status1'
                    : item.status === 2
                    ? 'status2'
                    : item.status === 3
                    ? 'status3'
                    : item.status === 4
                    ? 'status4'
                    : item.status === 5
                    ? 'status5'
                    : 'status6'
                "
              >
                {{
                  item.status === 1
                    ? "待审核"
                    : item.status === 2
                    ? "已审核"
                    : item.status === 3
                    ? "待寄出"
                    : item.status === 4
                    ? "已寄出"
                    : item.status === 5
                    ? "已签收"
                    : "已驳回"
                }}
              </button>
            </div>
            <div class="header1">
              <span>申请医院：</span>
              <span>四川省保健院北苑</span>
            </div>
            <div class="header1">
              <span>申请人：</span>
              <span>{{ item.username }}</span>
            </div>
            <div class="header1">
              <span>申请时间</span>
              <span>{{ moment(item.time).format("YYYY-MM-DD HH:mm:ss") }}</span>
            </div>
            <div class="header1">
              <span>订单金额</span>
              <span>￥100</span>
            </div>
            <div v-if="item.status === 6">
              <div class="reason">
                <p>驳回原因：</p>
                <span>{{ item.reason }}</span>
              </div>
            </div>
            <div
              class="footer"
              v-if="item.status === 1 || item.status === 5 || item.status === 6"
            >
              <button @click="clickDetail(item)">
                {{
                  item.status === 1
                    ? "取消申请"
                    : item.status === 5
                    ? "查看详情"
                    : item.status === 4
                    ? ""
                    : item.status === 6
                    ? "重新申请"
                    : ""
                }}
              </button>
            </div>
          </div>
        </van-tab>
        <van-tab title="已审核" class="content">
          <div
            v-for="item in list.filter((item) => item.status === 2)"
            :key="item._id"
            class="item"
          >
            <div class="header">
              <h3>住院病案</h3>
              <button
                :class="
                  item.status === 1
                    ? 'status1'
                    : item.status === 2
                    ? 'status2'
                    : item.status === 3
                    ? 'status3'
                    : item.status === 4
                    ? 'status4'
                    : item.status === 5
                    ? 'status5'
                    : 'status6'
                "
              >
                {{
                  item.status === 1
                    ? "待审核"
                    : item.status === 2
                    ? "已审核"
                    : item.status === 3
                    ? "待寄出"
                    : item.status === 4
                    ? "已寄出"
                    : item.status === 5
                    ? "已签收"
                    : "已驳回"
                }}
              </button>
            </div>
            <div class="header1">
              <span>申请医院：</span>
              <span>四川省保健院北苑</span>
            </div>
            <div class="header1">
              <span>申请人：</span>
              <span>{{ item.username }}</span>
            </div>
            <div class="header1">
              <span>申请时间</span>
              <span>{{ moment(item.time).format("YYYY-MM-DD HH:mm:ss") }}</span>
            </div>
            <div class="header1">
              <span>订单金额</span>
              <span>￥100</span>
            </div>
            <div v-if="item.status === 6">
              <div class="reason">
                <p>驳回原因：</p>
                <span>{{ item.reason }}</span>
              </div>
            </div>
            <div
              class="footer"
              v-if="item.status === 1 || item.status === 5 || item.status === 6"
            >
              <button @click="clickDetail(item)">
                {{
                  item.status === 1
                    ? "取消申请"
                    : item.status === 5
                    ? "查看详情"
                    : item.status === 4
                    ? ""
                    : item.status === 6
                    ? "重新申请"
                    : ""
                }}
              </button>
            </div>
          </div>
        </van-tab>
        <van-tab title="已取消" class="content">
          <div
            v-for="item in list.filter((item) => item.status === 0)"
            :key="item._id"
            class="item"
          >
            <div class="header">
              <h3>住院病案</h3>
              <button
                :class="
                  item.status === 1
                    ? 'status1'
                    : item.status === 2
                    ? 'status2'
                    : item.status === 3
                    ? 'status3'
                    : item.status === 4
                    ? 'status4'
                    : item.status === 5
                    ? 'status5'
                    : 'status6'
                "
              >
                {{
                 item.status === 1
                    ? "待审核"
                    : item.status === 2
                    ? "已审核"
                    : item.status === 3
                    ? "待寄出"
                    : item.status === 4
                    ? "已寄出"
                    : item.status === 5
                    ? "已签收"
                    : item.status === 6
                    ? "已驳回"
                    : item.status === 0
                    ? "已取消"
                    : ""
                }}
              </button>
            </div>
            <div class="header1">
              <span>申请医院：</span>
              <span>四川省保健院北苑</span>
            </div>
            <div class="header1">
              <span>申请人：</span>
              <span>{{ item.username }}</span>
            </div>
            <div class="header1">
              <span>申请时间</span>
              <span>{{ moment(item.time).format("YYYY-MM-DD HH:mm:ss") }}</span>
            </div>
            <div class="header1">
              <span>订单金额</span>
              <span>￥100</span>
            </div>
            <div v-if="item.status === 6">
              <div class="reason">
                <p>驳回原因：</p>
                <span>{{ item.reason }}</span>
              </div>
            </div>
            <div
              class="footer"
              v-if="item.status === 1 || item.status === 5 || item.status === 6"
            >
              <button @click="clickDetail(item)">
                {{
                  item.status === 1
                    ? "取消申请"
                    : item.status === 5
                    ? "查看详情"
                    : item.status === 4
                    ? ""
                    : item.status === 6
                    ? "重新申请"
                    : ""
                }}
              </button>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import Navbar from "./component/Navbar.vue";
import axios from "axios";
import moment from "moment";
import { useRouter } from "vue-router";
const router = useRouter();

const active = ref(0);
const list = ref<list[]>([]);
interface list {
  username: string;
  card: Number;
  addmissNumber: Number;
  _id: string;
  phone: Number;
  address: string;
  list: Array<string>;
  time: Date;
  status: Number;
  reason: string;
  num: Number;
}

onMounted(() => {
  getCopy();
});

const clickDetail = async (item: any) => {
  if (item.status === 5 || item.status === 4) {
    console.log(111);
    router.push({
      path: "/orderDetail",
      query: {
        _id: item._id,
      },
    });
  } else if (item.status === 1) {
    let {
      data: { code },
    } = await axios.post("http://localhost:3000/zhc/changeStatus", {
      _id: item._id,
    });
    if (code === 200) {
      getCopy();
    }
  } else if (item.status === 6) {
    router.push({
      path: "/addCopy",
    });
  }
};
const getCopy = async () => {
  let {
    data: { data },
  } = await axios.post("http://localhost:3000/zhc/getCopy");
  list.value = data;
};
</script>

<style scoped lang="scss">
.order {
  width: 100%;
  height: 100%;
  background-color: white;
  overflow: hidden;
  .tab {
    margin-top: 46px;
    width: 100%;
    height: calc(100% - 46px);
    overflow-y: auto;
    background-color: rgb(242, 242, 239);
    .content {
      width: 90%;
      margin-left: 5%;
      box-sizing: border-box;
    }
    .item {
      width: 100%;
      background-color: white;
      margin-top: 10px;
      border-radius: 10px;
      .header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-left: 5px solid #0d6efd;
        box-sizing: border-box;
        button {
          border: none;
          padding: 2px 5px;
          background-color: rgb(252, 251, 226);
          color: white;
          border-radius: 5px;
          font-size: 12px;
          color: rgb(255, 204, 191);
        }
        .status1 {
          color: rgb(255, 204, 191);
          background-color: rgb(252, 251, 226);
        }
        .status2 {
          color: rgb(0, 165, 255);
          background-color: rgb(226, 224, 255);
        }
      }
      .header1 {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        line-height: 30px;
        padding: 0px 10px;
      }
      .reason {
        background-color: rgba($color: #000000, $alpha: 0.1);
        padding: 10px;
        border-radius: 10px;
        margin: 10px;
        line-height: 30px;
        p {
          color: red;
        }
      }
      .footer {
        display: flex;
        justify-content: flex-end;
        padding: 10px 10px;
        button {
          border: none;
          padding: 5px 10px;
          background-color: #0d6efd;
          color: white;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>